<script setup>
import { ref, watch } from 'vue'
import PlanDialog from './PlanDialog.vue'
// 接收父组件传过来的参数
const props = defineProps({
  patientId: {
    type: Number
  },
  recordId: {
    type: Number
  },
  mainComplaint: {
    type: String
  },
  currentHistory: {
    type: String
  },
  patientHistory: {
    type: Object
  },
  systemicDisease: {
    type: Object
  },
  imageCheck: {
    type: String
  },
  mouthImages: {
    type: Array
  },
  treatmentPlan: {
    type: Object
  }
})

// 绑定planDialog
const planDialogRef = ref('')

const listLength = ref(0)

// 监听props.systemicDisease的变化
watch(
  () => props.systemicDisease,
  () => {
    if (
      !props.systemicDisease ||
      props.systemicDisease.recordId === null
    ) {
      return
    }
    if (props.recordId !== props.systemicDisease.recordId) {
      // console.log('id不一致')
      return
    }
    // 默认全身状况表
    const defaultSystemicDiseaseRecord = {
      isShowSymptom: '0',
      // 高血压
      highBloodPressure: '0',
      highBloodPressureIndicate: '',
      isHighBloodPressureMedication: '0',
      highBloodPressureMedication: '',
      // 糖尿病
      diabetes: '0',
      diabetesIndicate: '',
      isDiabetesMedication: '0',
      diabetesMedication: '',
      // 冠心病
      coronaryHeartDisease: '0',
      coronaryHeartDiseaseIndicate: '',
      isCoronaryHeartDiseaseMedication: '0',
      coronaryHeartDiseaseMedication: '',
      // 脑血管疾病
      cerebrovascularDisease: '0',
      cerebrovascularDiseaseIndicate: '',
      isCerebrovascularDiseaseMedication: '0',
      cerebrovascularDiseaseMedication: '',
      // 动脉粥样硬化
      atherosclerosis: '0',
      atherosclerosisIndicate: '',
      isAtherosclerosisMedication: '0',
      atherosclerosisMedication: '',
      // 肺部疾病
      lungDisease: '0',
      lungDiseaseIndicate: '',
      isLungDiseaseMedication: '0',
      lungDiseaseMedication: '',
      // 胃肠道病
      gastrointestinalDisease: '0',
      gastrointestinalDiseaseIndicate: '',
      isGastrointestinalDiseaseMedication: '0',
      gastrointestinalDiseaseMedication: '',
      // 类风湿性关节炎
      rheumatoidArthritis: '0',
      rheumatoidArthritisIndicate: '',
      isRheumatoidArthritisMedication: '0',
      rheumatoidArthritisMedication: '',
      // 骨质疏松
      osteoporosis: '0',
      osteoporosisIndicate: '',
      isOsteoporosisMedication: '0',
      osteoporosisMedication: '',
      // 血液病
      hemopathy: '0',
      hemopathyIndicate: '',
      isHemopathyMedication: '0',
      hemopathyMedication: '',
      // 肝胆病
      hepatobiliaryDisease: '0',
      hepatobiliaryDiseaseIndicate: '',
      isHepatobiliaryDiseaseMedication: '0',
      hepatobiliaryDiseaseMedication: '',
      // 其他疾病
      otherDisease: '0',
      otherDiseaseIndicate: '',
      isOtherDiseaseMedication: '0',
      otherDiseaseMedication: '',
      // 心脑血管手术
      cardiacCerebrovascularSurgery: '0',
      cardiacCerebrovascularSurgeryIndicate: '',
      isCardiacCerebrovascularSurgeryMedication: '0',
      cardiacCerebrovascularSurgeryMedication: '',
      // 关节、瓣膜置换手术
      jointValveReplacementSurgery: '0',
      jointValveReplacementSurgeryIndicate: '',
      isJointValveReplacementSurgeryMedication: '0',
      jointValveReplacementSurgeryMedication: '',
      // 器官移植手术
      organTransplantSurgery: '0',
      organTransplantSurgeryIndicate: '',
      isOrganTransplantSurgeryMedication: '0',
      organTransplantSurgeryMedication: '',
      // 其他手术
      otherSurgery: '0',
      otherSurgeryIndicate: '',
      isOtherSurgeryMedication: '0',
      otherSurgeryMedication: '',
      // 妊娠期
      gestationPeriod: '0',
      gestationPeriodIndicate: '',
      isGestationPeriodMedication: '0',
      gestationPeriodMedication: '',
      // 直系亲属牙周炎病史
      immediateFamilyPeriodontitisHistory: '0',
      immediateFamilyPeriodontitisHistoryIndicate: '',
      isImmediateFamilyPeriodontitisHistoryMedication: '0',
      immediateFamilyPeriodontitisHistoryMedication: '',
      // 吸烟
      smoking: '0',
      smokingIndicate: '',
      isSmokingMedication: '0',
      smokingMedication: '',
      // 焦虑、神经紧张、压力
      anxietyNervousnessStress: '0',
      anxietyNervousnessStressIndicate: '',
      isAnxietyNervousnessStressMedication: '0',
      anxietyNervousnessStressMedication: '',
      // 其他疾病、长期药物治疗史
      otherDiseaseAndLongTreatment: '0',
      otherDiseaseAndLongTreatmentIndicate: '',
      isOtherDiseaseAndLongTreatmentMedication: '0',
      otherDiseaseAndLongTreatmentMedication: ''
    }

    // 创建一个 tempSystemicDiseaseRecord 对象, 用来储存父组件传递的全身病史
    const tempSystemicDiseaseRecord = {
      ...props.systemicDisease
    }
    // 去除 tempSystemicDiseaseRecord 中的 id, patientId, recordId, createTime, updateTime, doctorId. isShowSymptom
    delete tempSystemicDiseaseRecord.id
    delete tempSystemicDiseaseRecord.patientId
    delete tempSystemicDiseaseRecord.recordId
    delete tempSystemicDiseaseRecord.createTime
    delete tempSystemicDiseaseRecord.updateTime
    delete tempSystemicDiseaseRecord.doctorId

    let flag = ref(false)

    // 判断 tempSystemicDiseaseRecord 是否为 defaultSystemicDiseaseRecord
    for (const key in tempSystemicDiseaseRecord) {
      if (
        tempSystemicDiseaseRecord[key] !==
        defaultSystemicDiseaseRecord[key]
      ) {
        flag.value = true
        break
      }
    }

    // 如果 tempSystemicDiseaseRecord 与 defaultSystemicDiseaseRecord 一致, 清空 systemicDiseaseRecordList
    if (!flag.value) {
      systemicDiseaseRecordList.value = {}
      listLength.value = 0
      flag.value = false
      return
    }

    // 初始化集合
    systemicDiseaseRecordList.value = {}

    // 判断systemicDisease中的每个病是否为1, 为1则将对应的中文名称添加到systemicDiseaseRecordList中
    for (const key in props.systemicDisease) {
      // 排除isShowSymptom属性
      if (key === 'isShowSymptom') {
        continue
      }
      // 如果病为1, 且不包含medication, 则将对应的中文名称添加到systemicDiseaseRecordList中
      if (
        props.systemicDisease[key] === '1' &&
        key.indexOf('Medication') === -1
      ) {
        systemicDiseaseRecordList.value[key] =
          systemicDiseaseName[key]
        // console.log(systemicDiseaseRecordList.value)
      }
    }

    // 打印集合的长度
    listLength.value = Object.keys(
      systemicDiseaseRecordList.value
    ).length

    // console.log(listLength.value)
    flag.value = false
  }
)

// 全身状况对应中文名称
const systemicDiseaseName = {
  highBloodPressure: '高血压',
  diabetes: '糖尿病',
  coronaryHeartDisease: '冠心病',
  cerebrovascularDisease: '脑血管疾病',
  atherosclerosis: '动脉粥样硬化',
  lungDisease: '肺部疾病',
  gastrointestinalDisease: '胃肠道病',
  rheumatoidArthritis: '类风湿性关节炎',
  osteoporosis: '骨质疏松',
  hemopathy: '血液病',
  hepatobiliaryDisease: '肝胆病',
  otherDisease: '其他疾病',
  cardiacCerebrovascularSurgery: '心脑血管手术',
  jointValveReplacementSurgery: '关节、瓣膜置换手术',
  organTransplantSurgery: '器官移植手术',
  otherSurgery: '其他手术',
  gestationPeriod: '妊娠期',
  immediateFamilyPeriodontitisHistory: '直系亲属牙周炎病史',
  smoking: '吸烟',
  anxietyNervousnessStress: '焦虑、神经紧张、压力',
  otherDiseaseAndLongTreatment: '其他疾病、长期药物治疗史'
}

const systemicDiseaseRecordList = ref({})

/**
 * 添加治疗计划
 */
const addPlan = () => {
  // 打开planDialog
  planDialogRef.value.open(1)
}

/**
 * 修改治疗计划
 */
const editPlan = () => {
  // 打开planDialog
  planDialogRef.value.open(props.treatmentPlan)
}
</script>

<template>
  <PlanDialog
    ref="planDialogRef"
    :patientId="props.patientId"
    :recordId="props.recordId"
  ></PlanDialog>
  <el-scrollbar height="550px">
    <!-- 添加滚动条, 设置没有width属性 -->
    <div class="main-content">
      <el-row>
        <el-col :span="14">
          <el-card>
            <template #header> 基本信息 </template>
            <el-descriptions
              :column="1"
              border
              class="descriptions"
            >
              <el-descriptions-item label="主诉">{{
                props.mainComplaint
              }}</el-descriptions-item>

              <el-descriptions-item label="现病史">
                {{
                  props.currentHistory
                }}</el-descriptions-item
              >

              <el-descriptions-item label="既往病史">
                {{ props.patientHistory.pastHistory }}
              </el-descriptions-item>

              <el-descriptions-item label="个人病史">
                {{ props.patientHistory.personalHistory }}
              </el-descriptions-item>

              <el-descriptions-item label="家族病史">
                {{ props.patientHistory.familyHistory }}
              </el-descriptions-item>

              <el-descriptions-item label="全身状况">
                <!-- 使用el-tag标签展示全身状况记录 -->
                <div v-if="listLength === 0">
                  <el-tag> 没有其他疾病 </el-tag>
                </div>

                <div v-else>
                  <el-tag
                    v-for="(
                      item, index
                    ) in systemicDiseaseRecordList"
                    :key="index"
                    type="warning"
                    >{{ item }}
                  </el-tag>
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>

          <br />

          <!-- 口内照片卡片 -->
          <el-card class="mouth-image-card">
            <template #header> 口内照片 </template>
            <div class="image-grid">
              <!-- 使用 for 遍历图片数组 -->
              <div
                v-for="(item, index) in props.mouthImages"
                :key="index"
                class="image-container"
              >
                <el-image
                  class="avatar"
                  :src="item"
                  fit="cover"
                  :preview-src-list="[item]"
                ></el-image>
              </div>
            </div>
          </el-card>
          <br />

          <!-- 影像学检查卡片 -->
          <el-card class="image-check-card">
            <template #header> 影像学检查 </template>
            <!-- 开启预览模式 -->
            <el-image
              v-if="props.imageCheck"
              :src="props.imageCheck"
              fit="cover"
              :preview-src-list="[props.imageCheck]"
            ></el-image>
          </el-card>
        </el-col>

        <!-- 治疗计划 -->
        <el-col :span="8" class="plan-container">
          <!-- 治疗计划卡片, 有数据情况 -->
          <el-card
            v-if="props.treatmentPlan"
            class="plan-card"
          >
            <template #header>
              <div class="header-container">
                <span>治疗计划</span>
                <el-button type="warning" @click="editPlan"
                  >修改计划
                </el-button>
              </div>
            </template>
            <div class="plan-content">
              <el-descriptions :column="1">
                <el-descriptions-item label="治疗类型:"
                  ><el-tag>{{
                    props.treatmentPlan.planType === 0
                      ? '拔牙'
                      : props.treatmentPlan.planType === 1
                        ? '补牙'
                        : props.treatmentPlan.planType === 2
                          ? '牙龈出血'
                          : props.treatmentPlan.planType ===
                              3
                            ? '短期牙周病'
                            : props.treatmentPlan
                                  .planType === 4
                              ? '长期牙周病'
                              : '牙周病康复'
                  }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="治疗医师:"
                  >{{ treatmentPlan.mainDoctor }}
                </el-descriptions-item>
                <el-descriptions-item label="计划内容:"
                  >{{ treatmentPlan.planDec }}
                </el-descriptions-item>
                <el-descriptions-item label="创建时间:"
                  >{{ treatmentPlan.createTime }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
          <!-- 无数据情况 -->
          <el-card v-else class="no-data-card">
            <template #header>
              <div class="header-container">
                <span>治疗计划</span>
                <el-button type="primary" @click="addPlan"
                  >添加计划
                </el-button>
              </div>
            </template>
            <h1>
              未设置治疗计划, 请点击右上角按钮添加计划
            </h1>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>
</template>

<style scoped lang="scss">
// 计划容器
.plan-container {
  height: 100%;
  width: 100%;
  // 设置左边距
  margin-left: 10px;
  .el-card {
    width: 110%;
    height: 100%;
  }
  /* 头部 */
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* 无数据卡片 */
  .no-data-card {
    text-align: center;
    justify-content: center;
    align-items: center;
    // 设置字体大小
    font-size: 18px;
    // 设置字体颜色
    color: #999;
    // 设置高度
    height: 40vh;

    .header-container {
      color: #333;
    }
  }

  /* 治疗计划卡片 */
  .plan-card {
    .tag-item {
      // 设置字体大小
      font-size: 16px;
    }
    // 设置高度
    height: 40vh;
    :deep(.el-descriptions__body) {
      width: 100%;
    }
    :deep(.el-descriptions__label) {
      width: 15%;
      // 设置字体大小
      font-size: 16px !important;
    }
    :deep(.el-descriptions__content) {
      width: 30px;
      // 设置字体大小
      font-size: 16px !important;
      // 设置自动换行
      word-break: break-all;
    }
    .el-tag {
      // 设置大小
      height: 30px;
      // 设置字体大小
      font-size: 14px;
      // 设置右边距
      margin-right: 10px;
      // 设置下边距
      margin-bottom: 10px;
      // 设置上边距
      margin-top: 10px;
    }
  }
}

.descriptions {
  .tag-item {
    // 设置字体大小
    font-size: 16px;
  }
  :deep(.el-descriptions__body) {
    width: 100%;
  }
  :deep(.el-descriptions__label) {
    width: 15%;
    // 设置字体大小
    font-size: 16px !important;
  }
  :deep(.el-descriptions__content) {
    width: 30px;
    // 设置字体大小
    font-size: 16px !important;
    // 设置自动换行
    word-break: break-all;
  }
  .el-tag {
    // 设置大小
    height: 30px;
    // 设置字体大小
    font-size: 14px;
    // 设置右边距
    margin-right: 10px;
    // 设置下边距
    margin-bottom: 10px;
    // 设置上边距
    margin-top: 10px;
  }
}

// 口内照片卡片
.mouth-image-card {
  .image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 调整图片之间的间距 */
  }

  .image-container {
    position: relative;
    display: inline-block;
    margin-right: 10px;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    border: 2px solid var(--el-border-color); /* 为已上传的图片添加边框 */
  }
}

// 图片检查卡片
.image-check-card {
  .el-image {
    // 设置宽高
    width: 178px;
    height: 178px;
  }
}
</style>
